* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;

}

.logo img {
    vertical-align: bottom;
    margin-top: 7.5px;
    
    margin-bottom: 7.5px;
    float: left;
}



.header {
    line-height: 100px;
    height: 100px;
    margin: 0 20%;
    overflow: hidden;
}
.headerbox2{
    margin-left: 50px;
    float: left;
    overflow: hidden;

}




.headerbox1{
    float: left;
    margin-left: 100px;
    overflow: hidden;

}
.headerbox1 li {
    float: left;
   display: inline-block;
   margin-left: 20px;
}
.headerbox2 li {
    float: left;
    display: inline-block;
   margin-left: 20px;
}



.swipper{
    /* background-color: blueviolet; */
    position:relative;

    overflow: hidden;

}

.swipper .imgs {
    width: 400%;
}


.pre, .next {
    position: absolute;
    height: 32px;
    width: 32px;
    top: 184px;

}

.pre {
    left: 30px;
    background-image: url("../imgs/index-xb2.png");
}

.pre:hover {
    background-image: url("../imgs/index-xb4.png");

}
.next {
    right: 30px;
    background-image: url("../imgs/index-xb1.png");
}

.next:hover {
    background-image: url("../imgs/index-xb3.png");

}

.count {
    position: absolute;
    left: 45%;
    height: 15px;
    width: 10%;
    bottom:1%;
}

.count div{
    width: 10%;
    height: 15px;
    float: left;
    overflow: hidden;
    background-color: skyblue;
    border-radius: 50%;
    margin-right: 5px;
}

.count .active {
    background-color: red;
}

.count div:first-of-type {
    margin-left: 20%;
}


.swipper .imgs li {
    width: 25%;
    height: 400px;
    float: left;
}
.swipper .imgs li:nth-of-type(1) {
    background-image: url("../imgs/banner_01.jpg");
}
.swipper .imgs li:nth-of-type(2) {
    background-image:url("../imgs/banner_02.jpg");
}
.swipper .imgs li:nth-of-type(3) {
    background-image: url("../imgs/banner_03.jpg");
}
.swipper .imgs li:nth-of-type(4) {
    background-image: url("../imgs/banner_01.jpg");
}



.introduce {
    height: 600px;
    padding: 0 15% 30px;
    text-align: center;
}
.introduce .iheader{
    padding-top: 30px;
    height: 140px;
}

.introduce .iheader p{
    margin: 30px 0;
    padding: 0 20px;
    line-height: 2em;
}


.introduce .intrabout .box {

    float: left;
    height: 370px;
    padding-top: 30px;
    overflow: hidden;
    width: 22%;
}
.introduce .intrabout .box {
    margin-left: 4%;
}

.introduce .intrabout .box div {
    padding: 50px 0;
}


.introduce .intrabout .box:first-of-type{
    margin-left: 0;
}


.production {
    height: 450px;
    text-align: center;
    width: 100%;


}

.production .pheader{
    padding-top: 30px;
    height: 140px;
    overflow: hidden;
}

.production .pheader p{
    margin: 30px 0;
    padding: 0 20px;
    line-height: 2em;
}

.prodabout {
    height: 250px;
    margin: 0 0.2%;
}

.prodabout .box {
    float: left;
    width: 16.6%;
}
.prodabout .box img {
    width: 100%;
}

.prodabout .box p {
    text-align: left;
    background-color: gray;
    padding:0 5%;
}









.news {
    height: 500px;
    padding: 0 15% 30px;
    text-align: center;
}
.news .nheader{
    padding-top: 30px;
    height: 140px;
}

.news .nheader p{
    margin: 30px 0;
    padding: 0 20px;
    line-height: 2em;
}

.news .newabout {
    height: 300px;
}

.news .newabout .imgs {
    width: 49%;
    height: 300px;
    overflow: hidden;
    margin-right: 1%;
    float: left;
}


.news .newabout .imgs  li{
    float: left;

    width: 100%;
}

.news .newabout .imgs  li:nth-of-type(1) {
    background-image: url("../imgs/pro-center1.jpg");
    height: 300px;

}
.news .newabout .imgs  li:nth-of-type(2) {
    background-image: url("../imgs/pro-center2.jpg");
    height: 0;

}

.news .newabout .imgs  li:nth-of-type(3) {
    background-image: url("../imgs/pro-center3.jpg");
    height: 0;

}
.news .newabout .imgs li:nth-of-type(4) {
    background-image: url("../imgs/pro-center4.jpg");
    height: 0;

}


.news .newabout .box{
    float: left;
    width: 49%;
    margin-left: 1%;

}


.news .newabout .box .boxs{
    height: 60px;
    border-bottom: 1px dotted gray;
}
.news .newabout .box .boxs div{
    float: left;
    overflow: hidden;
    height: auto;

}

.news .newabout .box .boxs div:first-of-type{
    width: 15%;
    border: 1px solid skyblue;
    margin-right: 1%;
}

.news .newabout .box .boxs div:last-of-type{
    text-align: left; 
}

.news .newabout .box .boxs div:last-of-type p:first-of-type{
    color:aqua;
    font-size: large;
    font-weight: 500;

}

.news .newabout .box .boxs div:first-of-type p:first-of-type{
    font-size: x-large;
    font-weight: bolder;
    color:aqua
}

.news .newabout .box .boxs div:first-of-type p:last-of-type{
    color:white;
    background-color:aqua;
}


.news .newabout .box .texts {
    text-align: left;
}

.news .newabout .box .texts ul {
    padding-left: 0;
}

.news .newabout .box .texts li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding-left: 20px;
    margin-left: 0;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px dotted gray;
    padding-right: 10px;
}

.news .newabout .box .texts li::before {
    content: '•';
    position: absolute;
    left: 0;
    font-size: 20px;
    color: black;
    line-height: 40px;
}

.news .newabout .box .texts li span:first-of-type {
    flex-grow: 1;
    padding-right: 15px;
}

.news .newabout .box .texts li span.date {
    white-space: nowrap;
    color: #999;
}


.video {
    height: 500px;
    padding: 0 15% 30px;
    text-align: center;
}
.video .vheader{
    padding-top: 30px;
    height: 140px;
}

.video .vheader p{
    margin: 30px 0;
    padding: 0 20px;
    line-height: 2em;
}


.video .imgs{
    height: 300px;
}

.video .imgs .Imgcontainer:hover {
    transform: scale(1.1);
    box-shadow: 0px 15px 20px rgba(3, 166, 248, 0.5);
}

.video .imgs div{
    float: left;
    width: 24%;
    margin-right: 1%;

}
.video .imgs div:last-of-type{
    margin-right: 0;
    margin-left:0.5%;
}
.video .imgs div:first-of-type{
    margin-right: 1.5%;
}

.video .imgs div img{
    height: 200px;
    width: 100%;
}
.video .imgs div div{
    height: 100px;
    width: 100%;
}
.video {
    position: relative;
}

.pre, .next {
    position: absolute;
    height: 32px;
    width: 32px;
    top: 184px;

}
.video .pre, .next {
    top: 250px;
}
.pre {
    left: 30px;
    background-image: url("../imgs/index-xb2.png");
}

.pre:hover {
    background-image: url("../imgs/index-xb4.png");

}
.next {
    right: 30px;
    background-image: url("../imgs/index-xb1.png");
}

.next:hover {
    background-image: url("../imgs/index-xb3.png");

}


.footer {
    height: 300px;
    color:white;
    margin-top: 50px;
    background-color: skyblue;
    font-size: large;
}

.footer .boxs {

    width: 80%;
    height: 200px;
    margin:0 auto;
    padding-top: 50px;;
}

.footer .leftbox {
}

.footer .boxs .leftbox ul{
    float: left;
    overflow: hidden;
    margin-right: 5%;
}

.footer .boxs .leftbox ul li:first-of-type{
    text-decoration: underline;
}
.footer .boxs .rightbox {
    position: relative;
    right: -100px;
}

input {
}

textarea {
    min-width: 350px;
    max-width: 350px;
    min-height: 50px;
    max-height: 50px;
}

textarea, input {
    border: 1px solid white;
    background-color:skyblue;
    margin: 10px 10px;

    color:white;
}

hr {
    margin-top: 20px;
}